<template>
  <div>
    <!-- 目录 -->
    <!-- 页面主体卡片试图结构 -->

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-row>
          <!-- 目录名称区域 -->
          <el-col :span="2">
            <span class="subjacketName">目录名称</span>
          </el-col>
          <!-- 输入内容的input框 -->
          <el-col :span="3">
            <span>
              <el-input v-model="queryInfo.directoryName"></el-input>
            </span>
          </el-col>
          <!-- 状态 -->
          <el-col :span="2" :offset="3">
            <span class="subjacketName">状态</span>
          </el-col>
          <el-col :span="4">
            <el-select v-model="queryInfo.state" placeholder="请选择">
              <el-option label="启用" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option>
            </el-select>
          </el-col>

          <!-- 清除搜索按钮 -->
          <el-col :span="5">
            <el-button size="medium" @click="cleSearch">清除</el-button>
            <el-button type="primary" size="medium" @click="SubSearch">搜索</el-button>
          </el-col>
          <!-- 新增学科按钮区域 -->
          <el-col :span="5">
            <el-button type="text" v-show="this.queryInfo.subjectID!=null" @click="Goback">返回学科</el-button>
            <el-button type="success" icon="el-icon-edit" @click="addDirectorys">新增目录</el-button>
          </el-col>
        </el-row>
      </div>
      <!-- 提示条数区域 -->
      <el-alert :title="`数据一共${counts}条`" type="info" show-icon close-text="."></el-alert>
      <!-- 数据展示区域 -->
      <el-table style="width: 100% " :data="directorysList" border stripe>
        <el-table-column type="index" label="序号" width="80"></el-table-column>
        <el-table-column prop="subjectName" label="所属学科" width="100"></el-table-column>
        <el-table-column prop="directoryName" label="目录名称" width="180"></el-table-column>
        <el-table-column prop="username" label="创建者" width="200"></el-table-column>
        <el-table-column prop="addDate" label="创建日期" width="200"></el-table-column>
        <el-table-column prop="totals" label="面试题数量" width="100"></el-table-column>
        <el-table-column prop="state" label="状态" width="180" v-slot="scope">
          <span v-if="scope.row.state==1">已启用</span>
          <span v-else>已禁用</span>
        </el-table-column>
        <el-table-column label="操作" width="265" v-slot="scope">
          <!-- 启用禁用 -->
          <template>
            <el-button type="text" v-if="scope.row.state==1" @click="forbidden(scope.row)">禁用</el-button>
            <el-button type="text" v-else @click="enable(scope.row)">启用</el-button>
          </template>
          <!-- 修改开关 -->
          <template>
            <el-button
              type="text"
              v-if="scope.row.state==1"
              @click="addDirectorys(scope.row,333)"
            >修改</el-button>
            <el-button type="text" v-else disabled>修改</el-button>
          </template>
          <template>
            <el-button type="text" v-if="scope.row.state==1" @click="delBtn(scope.row)">删除</el-button>
            <el-button type="text" v-else disabled>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="queryInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="counts"
        ></el-pagination>
      </div>
    </el-card>
    <!-- 新增目录的弹出框区域 -->
    <el-dialog title="新增目录" :visible.sync="addDirectorysDialog" width="30%">
      <!-- 表单验证区域 -->
      <el-form :model="addLIst" :rules="addrules" ref="addLIst" label-width="100px">
        <!-- 选择器 -->
        <el-form-item label="所属学科" prop="subjectID">
          <el-select v-model="addLIst.subjectID" placeholder="请选择">
            <el-option
              v-for="item in easySubjectList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 输入框 -->
        <el-form-item label="目录名称" prop="directoryName">
          <el-input v-model="addLIst.directoryName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel('addLIst')">取 消</el-button>
        <el-button type="primary" v-if="addOramend" @click="addsubjBtn('addLIst')">确 定</el-button>
        <el-button type="primary" v-else @click=" amend('addLIst')">修 改</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
// 导入数据请求方法
import {
  getdirectorys,
  deldirectorys,
  forbiddenState,
  enableState,
  easySubject,
  append,
  amends
} from '@/api/subject/directorys.js'
export default {
  name: 'directorys',
  data() {
    return {
      // 请求页面数据的绑定
      queryInfo: {
        page: 1,
        pagesize: 5,
        directoryName: null,
        state: null,
        subjectID: null
      },
      // router: this.$route.sbjdataid,
      // 改变状态
      alterList: {
        alterSate: 1,
        id: 0
      },
      // 获取到的数据
      directorysList: [],
      // 总数据条数
      counts: 0,
      // 搜索框的绑定
      searchInput: '',
      // 下拉选框的绑定
      selectInput: '',
      // 新增目录的弹出框
      addDirectorysDialog: false,
      // 新增下拉选框所需要的数据
      easySubjectList: {},
      // 新增目录的表单数据绑定
      addLIst: {
        directoryName: '',
        subjectID: '',
        id: ''
      },
      // 新增目录的表单验证绑定
      addrules: {
        directoryName: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 7, message: '目录在 3 到 7 个字符', trigger: 'blur' }
        ],
        subjectID: [{ required: true, message: '请选择学科', trigger: 'blur' }]
      },
      // 判断是新增按钮 还是修改按钮
      addOramend: true
    }
  },
  created() {
    this.getDirectorysList()
    // console.log(this.$route.sbjdataid)
  },
  computed: {},
  methods: {
    // 获取页面数据
    async getDirectorysList() {
      this.queryInfo.subjectID = this.$route.query.sbjdataid
      console.log(this.queryInfo.subjectID)
      const { data } = await getdirectorys(this.queryInfo)
      console.log(data)
      this.counts = data.counts
      this.directorysList = data.items
    },
    // 清除按钮
    cleSearch() {
      this.queryInfo.directoryName = null
      this.queryInfo.state = null
      this.getDirectorysList()
    },
    // 按照状态搜索按钮
    SubSearch() {
      console.log(this.queryInfo.state)
      this.getDirectorysList()
      this.queryInfo.directoryName = null
    },
    // 返回上一页
    Goback() {
      this.$router.go(-1)
    },
    // 新增目录
    async addDirectorys(e, r) {
      if (r === 333) {
        console.log(111111111)
        this.addOramend = false
      } else {
        console.log(2222222)
      }
      const { data } = await easySubject()
      this.addLIst.directoryName = e.directoryName
      this.addLIst.subjectID = e.subjectID
      this.addLIst.id = e.id
      this.easySubjectList = data
      this.addDirectorysDialog = true
    },
    // 列表数据操作区域
    // 目录状态管理启用禁用
    // 禁用
    forbidden(e) {
      forbiddenState(e.id)
      this.getDirectorysList()
    },
    // 启用
    enable(e) {
      enableState(e.id)
      this.getDirectorysList()
    },
    // 修改数据
    alter(e, r) {
      if (r !== 333) {
        console.log(1231211)
      }
      console.log(e)

      this.addDirectorysDialog = true
    },
    // 删除当前行
    delBtn(e) {
      this.$confirm('此操作将永久删除该目录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deldirectorys(e)
          this.getDirectorysList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 页码值区域
    // 更改每页显示数据
    handleSizeChange(newpage) {
      this.queryInfo.pagesize = newpage
      this.getDirectorysList()
    },
    // 更改选中页
    handleCurrentChange(val) {
      this.queryInfo.page = val
      this.getDirectorysList()
    },
    // 取消新增学科
    cancel(formName) {
      this.addDirectorysDialog = false
      this.addLIst.directoryName = ''
      this.$refs[formName].resetFields()
    },
    // 新增学科的确定按钮
    addsubjBtn(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          append(this.addLIst)
          this.addDirectorysDialog = false
        } else {
          console.log(this.addLIst.directoryName)
          return false
        }
        this.$refs[formName].resetFields()
        this.getDirectorysList()
      })
    },
    // 修改学科的确定按钮
    amend(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          amends(this.addLIst)
          this.getDirectorysList()
          this.addDirectorysDialog = false
        } else {
          console.log(this.addLIst.directoryName)
          return false
        }
        this.$refs[formName].resetFields()
      })
    }
  }
}
</script>

<style  lang="less" scoped>
.box-card {
  .clearfix {
    .el-col {
      padding-left: 20px;
      /deep/.el-input__inner {
        height: 35px;
      }
      // 修改学科名称的样式
      .subjacketName {
        font-size: 16px;
        font-weight: 700;
        display: block;
        margin-top: 7px;
      }
    }
  }
  // 提示和页码的距离
  .el-table {
    margin: 15px 0;
  }
}
</style>
